import React, { Component } from 'react';
import {
  StyleSheet, Text, View, TouchableOpacity,
  PixelRatio, Image, FlatList, ScrollView
} from "react-native";
import { NavigationEvents } from 'react-navigation';
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { Common } from '../../../component/common/Common.js';
import StorageHelper from '../../../utils/storageHelper';
import { STORAGE_CONSTANT } from '../../../config/storage';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';
import { RefuseModal } from '../../../component/ModalVerifylComponent.js';
import { ProgressModal } from '../../../components/common/ProgressModal';
import { CommonDialog } from '../../../components/common/Dialog';
import OrderDetailsService from '../../order-new/details/_common/service';
import ModalPicDelComponent from '../../../component/ModalPicDelComponent';
import HTTP from '../../../utils/http'
import { API, API_GENERATE } from '../../../config/api';
import Echarts from 'native-echarts';
import moment from 'moment';
import { CURRENCY } from '../../../utils/helper';
import ToastUtil from '../../../utils/toast';
import { StateSectionNew } from '../../order/approve/details/_component/StateSectionNew';
const arrowIcon = require('../../../imgs/sanjiao3.png');

const scale = GLOBAL.SCALE;

export class newOilSellingDetail extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    return {
      headerTitle: '新油抛单审批详情',
      headerTintColor: style.color.white,
      headerLeft: <Common type="headLeft" onPress={() => { navigation.goBack() }} color='#fff' />,
      headerRight: (<Image style={style.head.headRightEmpty} source={require('../../../imgs/goBackEmpty.png')} />),
      headerStyle: {  // 头部整体样式 
        elevation: 0,
        borderBottomWidth: 0,
        backgroundColor: style.color.themeColor
      },
      headerTitleStyle: {
        flex: 1,
        textAlign: 'center'
      }
    }
  };
  constructor(props) {
    super(props);
    this.params = this.props.navigation.state.params;
    let { orderInfo, taskInfo } = this.params.item || {};
    this.state = {
      tabIndex: 0,
      modalVisibles: false,
      refreshIcon: false,
      status: 'data',
      resData: {},
    }
    this.orderInfo = orderInfo
    this.taskInfo = taskInfo
    this.reload = true;
    this.pageParams = { // TODO
      orderId: orderInfo.orderId
    };
  }
  async componentWillMount () {
    await this._initPage();
  }

  // 初始化数据
  _initPage = async () => {
    this.setState({
      status: this.reload ? 'loading' : 'data',
      refreshIcon: !this.reload,
    })
    let res = await HTTP.GET(API_GENERATE(API.MERGE_DETAIL), this.pageParams)
    if (res) {
      this.setState({
        status: res ? 'data' : 'empty',
        resData: res,
        refreshIcon: false
      })
    } else {
      this.setState({
        refreshIcon: false,
        status: 'error'
      })
    }
  }


  //切换
  _tabFn = (tabIndex) => {
    // this.reload = true;
    this.pageParams.pageNo = 1;
    this.setState({
      tabIndex,
    })
  }
  // 刷新页面
  _onErrorRefresh = () => {
    this.pageParams.pageNo = 1;
    this.reload = true;
    this._initPage();
  }

  // 审批
  approve = async () => {
    // if (this.requesting) return;
    this.setState({ showRejectModal: false, });
    // this.requesting = true;
    let { businessKey, taskId, formKey } = this.taskInfo;
    if (this.auditResult == '0' && !this.remark) {
      ToastUtil.showWarning('请填写驳回原因')
      return
    }
    const sendData = {
      businessKey: businessKey,
      taskId: taskId,
      formKey: formKey,
      auditResult: this.auditResult,
      remark: this.remark, // 填写
    }
    let text = this.auditResult ? '同意' : '驳回';
    this.setState({ status: 'loading' });
    let res = await HTTP.POST(API_GENERATE(API.ZXY_ORDER_APPROVE), sendData);
    // this.requesting = false;
    if (res) {
      ToastUtil.showSuccess(`${text}成功`).then(() => {
        this.props.navigation.state.params.callback();
        this.props.navigation.goBack()
      })
    } else {
      this.setState({
        status: 'data'
      })
    }
  }

  _renderApprove = (item) => {
    return (
      <View style={styles.flexWhole}>
        <View style={styles.itemDayTime}>
          <Text style={styles.consent} onPress={() => {
            this.auditResult = 1;
            this.remark = '';
            this.setState({
              showRejectModal: true,
            })
          }}>同意</Text>
          <Text style={styles.itemdown} onPress={() => {
            this.auditResult = 0;
            this.remark = '';
            this.setState({
              showRejectModal: true,
            })
          }}>驳回</Text>
        </View>
      </View>
    )
  }


  render () {
    let { status, showRejectModal, resData } = this.state
    let { orderList, orderTotal } = resData
    let { orderId, bizStaffName, staffOrganName, createTime, remark } = this.orderInfo
    return (
      <View style={styles.container}>
        <View style={styles.flexBox}>
          <Text style={styles.flexTitle}>新油销售单号: {orderId}</Text>
        </View>
        <View style={styles.flexApply}>
          <Text style={styles.flexTitle}>申请人:
          {bizStaffName ? bizStaffName : '-'}
            {staffOrganName ? '（' + staffOrganName + '）' : null}
          </Text>
        </View>
        <View style={styles.flexApply}>
          <Text style={styles.flexTitle}>申请时间: {createTime.substring(0, 16)}</Text>
        </View>
        <View style={[styles.flexApply, { paddingBottom: 50 * scale }]}>
          <Text style={styles.flexTitle}>申请原因: {remark}</Text>
        </View>
        {status == 'data' ?
          <View style={{ backgroundColor: '#fff', borderRadius: 12 * scale, marginHorizontal: 10 * scale, padding: 20 * scale, paddingBottom: 0 * scale, marginTop: -40 * scale }}>
            <Text style={styles.navTitle}>报关港口: {resData.portName}</Text>
            <View style={styles.orderMain}>
              {
                orderTotal && orderTotal.length > 0 ?
                  orderTotal.map((item, index) => {
                    return (
                      <View key={index} style={{ marginBottom: 5 }}>
                        <View style={styles.orderCol}>
                          <View>
                            <Text style={styles.orderValTitle}>{item.goodsName}</Text>
                          </View>
                          <View style={{ alignItems: 'center', alignItems: 'flex-end' }}>
                            {item.inQuantity ?
                              <Text style={styles.orderVal}>
                                内销量 {item.inQuantity} 吨
                              </Text>
                              : null
                            }
                            {item.openQuantity ?
                              <Text style={styles.orderVal}>
                                内敞口量 {item.openQuantity} 吨
                              </Text>
                              : null
                            }
                          </View>
                        </View>
                      </View>
                    )
                  })
                  : null
              }
            </View>
          </View> : null
        }
        {status == 'data' ?
          <View style={{ marginVertical: 10 * scale, marginHorizontal: 10 * scale }}>
            <Text style={styles.navTitle}>关联内销订单明细</Text>
          </View>
          : null}
        <ScrollView style={{ flex: 1 }} >
          <View style={{ backgroundColor: '#fff', borderRadius: 12 * scale, paddingHorizontal: 20 * scale, marginHorizontal: 10 * scale }}>
            {orderList ?
              <View>
                {orderList.map((item, index) => {
                  return (
                    <View key={index}>
                      <Text style={{ marginVertical: 15 * scale }}>内销：{
                        item.companyName.length > 8 ? item.companyName.substr(0, 8) + '...' : item.companyName
                      }|{item.orderId}</Text>
                      {item.itemList.map((j, i) => {
                        return (
                          <View key={i} style={{ marginBottom: 10 * scale, flexDirection: "row", justifyContent: 'space-between' }}>
                            <Text style={style.orderItemVal}>{j.goodsName}</Text>
                            <Text style={[style.orderItemVal, { paddingRight: 20 * scale }]}>关联 {j.lockedQuantity} 吨</Text>
                          </View>
                        )
                      })
                      }
                      {(index + 1) < orderList.length ?
                        <View style={styles.orderItemLine}>
                        </View> : null
                      }
                    </View>
                  )
                })}
              </View> : null
            }
          </View>

        </ScrollView>
        {
          status != 'data' ? (<PageStatusIndex status={status} emptyText={'暂无数据'} onErrorPress={this._onErrorRefresh} />) : null
        }
        {this._renderApprove()}
        {/* 审批意见 */}
        <RefuseModal
          titleText={'审批意见'}
          placeholderText={this.auditResult ? '请输入同意原因' : null}
          propsDefaultValue={this.auditResult ? '审批同意' : '审批驳回'}
          visible={showRejectModal}
          btnPress={(text) => {
            this.remark = text;
            this.approve();
          }}
          bgPress={() => {
            this.setState({
              showRejectModal: false,
            });
          }} />
      </View>
    )

  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f2f6fe',
    // paddingBottom: 30 * scale
  },
  flexBox: {
    flexDirection: 'row',
    paddingTop: 10 * scale,
    justifyContent: 'space-between',
    backgroundColor: style.color.themeColor,
    paddingLeft: 28 * scale,
    paddingRight: 35 * scale,
    paddingBottom: 10 * scale

  },
  flexTitle: {
    fontSize: 12 * scale,
    color: '#ffffff',
  },
  flexApply: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    backgroundColor: style.color.themeColor,
    paddingLeft: 28 * scale,
    paddingRight: 60 * scale,
    paddingBottom: 10 * scale
  },
  flexAccount: {
    paddingBottom: 25 * scale,
  },
  headTitleBox: {
    // backgroundColor: style.color.themeColor,
    marginTop: -15 * scale,
    // height: 50 * scale,
    borderTopLeftRadius: 10 * scale,
    borderTopRightRadius: 10 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: '#fff',
    backgroundColor: '#fff',
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-around',
    // paddingLeft: 60 * scale,
    // paddingRight: 60 * scale,
    // height: 600 * scale,
  },
  tabItems: {
    color: '#0E7FFD',
    fontSize: 12 * scale,
    // width: '35%',
    textAlign: 'center',
    marginTop: 20 * scale,
    opacity: .8,
    paddingRight: 5 * scale,
    paddingLeft: 5 * scale,
    paddingBottom: 5 * scale,
  },
  tabItemActive: {
    opacity: 1,
  },
  flexItem: {
    // flexDirection: 'row',
    paddingLeft: 30 * scale,
    paddingRight: 19 * scale,
    paddingTop: 20 * scale,
  },
  flexContent: {
    flexDirection: 'row',
    paddingBottom: 12 * scale,
  },
  flexContentText: {
    flexDirection: 'row',
    paddingBottom: 12 * scale,
  },
  flexItemTexe: {
    flexDirection: 'row',
    width: 120 * scale,
    fontSize: 12 * scale,
    color: '#000000',
    opacity: 0.7,
  },
  flexItemFid: {
    flexDirection: 'row',
    width: 220 * scale,
    flexWrap: 'wrap',
  },
  flexItemVaule: {
    flexDirection: 'row',
    width: 205 * scale,
    fontSize: 12 * scale,
    color: '#000000',
  },
  flexItemExt: {
    paddingRight: 15 * scale,
    fontSize: 12 * scale,
    color: '#000000',
    paddingBottom: 10 * scale,
  },
  flexItemBck: {
    flexDirection: 'row',
    width: 205 * scale,
  },
  flexItemTitle: {
    fontSize: 12 * scale,
    color: '#0091FF',
  },
  flexList: {
    // flexDirection: 'row',
    marginLeft: 10 * scale,
    marginRight: 12 * scale,
    marginTop: 14 * scale,
    borderRadius: 5 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: style.color.bgGray,
    backgroundColor: style.color.bgGray,
  },
  flexListItem: {
    flexDirection: 'row',
    paddingRight: 5 * scale,
    paddingLeft: 18 * scale,
    paddingTop: 9 * scale,
    paddingBottom: 14 * scale,
  },
  flexListItemName: {
    fontSize: 12 * scale,
    color: '#000000'
  },
  flexMeber: {
    marginLeft: 11 * scale,
    fontSize: 12 * scale,
    color: '#000',
  },
  flexListApply: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    // justifyContent: 'space-around',
    // position: 'relative',
    // marginBottom: 15 * scale,
    paddingLeft: 18 * scale,
    paddingRight: 8 * scale,
  },
  flexListApplyText: {
    flexDirection: 'row',
    width: 107 * scale,
    fontSize: 12 * scale,
    paddingRight: 6 * scale,
    color: '#000',
  },
  flexListApplyMenber: {
    flexDirection: 'row',
    width: 107 * scale,
    paddingRight: 6 * scale,
    fontSize: 12 * scale,
    paddingBottom: 15 * scale,
  },
  flexApplyMenbers: {
    flexDirection: 'row',
    width: 107 * scale,
    fontSize: 12 * scale,
    paddingBottom: 15 * scale,
  },
  flexListApplyVaule: {
    color: '#E02020',
  },
  flexListApplyType: {
    color: '#000',
  },
  flexListApplyNum: {
    color: '#0091FF'
  },
  flexWhole: {
    paddingVertical: 24 * scale,
  },
  flexWholeName: {
    borderWidth: 1,
    borderColor: '#fff',
    borderRadius: 15 * scale,
    paddingHorizontal: 16,
    paddingVertical: 6
  },
  flexWholeTitle: {
    fontSize: 11,
    color: '#fff'
  },
  itemDayTime: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around'
  },
  consent: {
    paddingRight: 20 * scale,
    paddingLeft: 20 * scale,
    paddingTop: 8 * scale,
    paddingBottom: 8 * scale,
    fontSize: 12 * scale,
    opacity: 1,
    color: '#ffffff',
    alignItems: 'center',
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: style.color.themeColor,
    borderRadius: 15 * scale,
    // marginRight: 0 * scale,
    flexDirection: 'row',
    backgroundColor: style.color.themeColor,
    overflow: 'hidden',
  },
  itemdown: {
    fontSize: 12 * scale,
    color: style.color.themeColor,
    alignItems: 'center',
    paddingRight: 20 * scale,
    paddingLeft: 20 * scale,
    paddingTop: 8 * scale,
    paddingBottom: 8 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    borderColor: style.color.themeColor,
    borderRadius: 15 * scale,
    marginRight: 20 * scale,
    flexDirection: 'row',
    marginLeft: 10 * scale,
  },
  echarts: {
    width: 375 * scale,
    // height: 400 * scale,
    // flex: 1,
    position: 'relative'
  },
  wenText: {
    // flexDirection: 'row',
    fontSize: 12 * scale,
    color: '#000',
    position: 'absolute',
    left: 162 * scale,
    top: 90 * scale,
    zIndex: 999,
    width: 56 * scale,
  },
  flexMoney: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    paddingRight: 28 * scale,
  },
  flexMoneyName: {
    color: '#2A3E51',
    fontSize: 12 * scale,
  },
  flexProduce: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingRight: 30 * scale,
    paddingLeft: 30 * scale,
    paddingTop: 16 * scale,
  },
  flexProduceBg: {
    flexDirection: 'row',
    width: 18,
    height: 10 * scale,
    marginTop: 2 * scale,
    justifyContent: 'flex-start',
    // backgroundColor: '#FF777A',
    borderRadius: 5 * scale,
    borderWidth: 1 * scale,
    borderStyle: 'solid',
    // borderColor: '#FF777A',
    overflow: 'hidden',
  },
  flexProduceName: {
    flexDirection: 'row',
    justifyContent: 'flex-start',
    width: 210 * scale,
    fontSize: 12 * scale,
    color: '#031B31',
    marginLeft: 5 * scale,
    opacity: 0.7,
  },
  flexProduceMoney: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    fontSize: 12 * scale,
    color: '#2A3E51',
  },
  flexNum: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingTop: 12 * scale,
    paddingRight: 30 * scale,
    paddingLeft: 30 * scale,
  },
  flexNumName: {
    color: '#031B31',
    fontSize: 12 * scale,
    opacity: 0.8,
    paddingLeft: 46 * scale,
  },
  flexNumVaule: {
    color: '#2A3E51',
    fontSize: 12 * scale,
  },
  more: {
    paddingHorizontal: 10 * scale,
    paddingVertical: 10 * scale,
    color: style.color.themeColor,
    flex: 1,
    textAlign: 'center'
  },
  dataItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15 * scale
  },
  dataItemH: {
    marginBottom: 15 * scale
  },
  dataItemTitle: {
    fontSize: 12 * scale,
    color: '#000000',
    opacity: 0.72,
    width: 65 * scale,
    marginRight: 55 * scale
  },
  dataItemText: {
    fontSize: 12 * scale,
    color: '#000000',
    flex: 1
  },
  dataBottomTitle: {
    fontSize: 14 * scale,
    color: '#000000',
    marginTop: 27 * scale,
    marginBottom: 10 * scale,
  },
  fileItem: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 10 * scale,
    flexWrap: "wrap"
  },
  fileText: {
    fontSize: 12 * scale,
    color: '#0091FF',
    marginBottom: 10 * scale,
  },
  dataShopItem: {
    backgroundColor: '#F4F7FE',
    borderRadius: 5 * scale,
    paddingVertical: 9 * scale,
    paddingHorizontal: 18 * scale,
    marginBottom: 14 * scale
  },
  dataShopTitle: {
    fontSize: 12 * scale,
    color: '#090909',
    fontWeight: '600'
  },
  dataShopContent: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 14 * scale
  },
  dataShopHorizontal: {
    flex: 1
  },
  dataShopText: {
    fontSize: 12 * scale,
    color: '#090909',
    marginBottom: 5 * scale
  },
  dataShopDetail: {
    fontSize: 12 * scale,
    color: '#090909',
    marginBottom: 8 * scale,
    marginLeft: 10 * scale
  },
  headBox: {
    paddingTop: 50 * scale,
    backgroundColor: style.color.themeColor,
    paddingBottom: 20 * scale,
  },
  topTitle: {
    fontSize: 18 * scale,
    color: '#fff',
    fontWeight: '600'
  },
  topBox: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingHorizontal: 18
  },
  navTitle: {
    fontSize: 14 * scale,
    color: '#09090A',
    fontWeight: '600'
  },
  orderVal: {
    fontSize: 12 * scale,
    color: '#000',
    marginBottom: 5 * scale
  },
  orderItemVal: {
    fontSize: 12 * scale,
    color: '#000',
  },
  orderCol: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    // height: 25 * scale,
    paddingBottom: 5 * scale,
    marginBottom: 5 * scale
  },
  orderMain: {
    paddingTop: 8 * scale,
  },
  orderValTitle: {
    fontWeight: '600'
  },
  orderItemLine: {
    height: 1 / PixelRatio.get(),
    backgroundColor: "#979797"
  },
})